
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <title>OpenLayers Google with Overlay Example</title> 
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
    <!-- this gmaps key generated for http://openlayers.org/dev/ --> 
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> 
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script> 
    <script type="text/javascript"> 

 // use a CQL parser for easy filter creation
 var format = new OpenLayers.Format.CQL();

 // this rule will get a filter from the CQL text in the form
 var rule = new OpenLayers.Rule({
     // We could also set a filter here.  E.g.
     // filter: format.read("STATE_ABBR >= 'B' AND STATE_ABBR <= 'O'"),
     symbolizer: {
         fillColor: "#ff0000",
         strokeColor: "#ffcccc",
         fillOpacity: "0.5"
     }    
 });

 var states = new OpenLayers.Layer.Vector("States", {
     styleMap: new OpenLayers.StyleMap({
         "default": new OpenLayers.Style(null, {rules: [rule]})
     })
 });

 var map = new OpenLayers.Map({
     div: "map",
     layers: [
         new OpenLayers.Layer.WMS(
             "OpenLayers WMS",
             "http://maps.opengeo.org/geowebcache/service/wms",
             {layers: "openstreetmap", format: "image/png"}
         ),
         states
     ],
     center: new OpenLayers.LonLat(-101, 39),
     zoom: 3
 });

 // called when features are fetched
 function loadFeatures(data) {
     var features = new OpenLayers.Format.GeoJSON().read(data);
     states.addFeatures(features);
 };

 // update filter and redraw when form is submitted
 var cql = document.getElementById("cql");
 var output = document.getElementById("output");
 function updateFilter() {
     var filter;
     try {
         filter = format.read(cql.value);
     } catch (err) {
         output.value = err.message;
     }
     if (filter) {
         output.value = "";
         rule.filter = filter;
         states.redraw();
     }
     return false;
 }
 updateFilter();
 var form = document.getElementById("cql_form");
 form.onsubmit = updateFilter;
 
    </script> 
  </head> 
 <body> 
        <h1 id="title">CQL Filter Example</h1> 
        <div id="tags"> 
            CQL, filter
        </div> 
        <p id="shortdesc"> 
            Demonstrate use the CQL filter.
        </p> 
        <div id="map" class="smallmap"></div> 
        <div id="docs"> 
            <p> 
                Enter text for a CQL filter to update the features displayed.
                <br> 
                <form name="cql_form" id="cql_form"> 
                    <label for="cql">CQL</label> 
                    <input id="cql" type="text" value="STATE_ABBR >= 'B' AND STATE_ABBR <= 'O'"> 
                    <input type="submit" value="update"> 
                    <input type="reset" value="reset"> 
                </form> 
                <textarea id="output"></textarea> 
            </p><p> 
                View the <a href="cql-format.js" target="_blank">cql-format.js source</a> 
                to see how this is done.
            </p> 
        </div> 
        <script src="cql-format.js"></script> 
        <script src="http://demo.opengeo.org/geoserver/wfs?service=WFS&amp;version=1.0.0&amp;request=GetFeature&amp;typename=topp:states&amp;outputFormat=json&amp;format_options=callback:loadFeatures" type="text/javascript"></script> 
    </body> 
</html> 